<template>
  <div class="property-panel" ref="propertyPanel">
    <el-form :inline="true" :model="form" label-width="100px" size="small">
      <el-form-item label="节点ID">
        <el-input v-model="form.id" disabled></el-input>
      </el-form-item>
      <el-form-item label="节点名称">
        <el-input v-model="form.name" @input="nameChange"></el-input>
      </el-form-item>
      <el-form-item label="节点人员" v-if="userTask">
        <el-input placeholder="" v-model="form.candidateUsers">
          <i slot="suffix" class="el-icon-search" @click="handleOpenDialog"></i>
        </el-input>
      </el-form-item>
    </el-form>
    <el-dialog
      title="节点人员"
      :visible.sync="open"
      width="800px"
      center
      v-if="open"
    >
      <span slot="footer" class="dialog-footer">
        <el-button @click="open = false" class="dialogCancel">取 消</el-button>
        <el-button type="primary" @click="handleSelectUser" class="tableAdd"
          >确 定</el-button
        >
      </span>
      <table-panel
        ref="tablePanel"
        align="left"
        table-data="/system/user/list"
        :queryParams="queryParams"
        :columns="columns"
        @selection-change="handleSelectTable"
      >
      </table-panel>
    </el-dialog>
  </div>
</template>

<script>
import TablePanel from "@/components/TablePanel/index.vue";
export default {
  name: "PropertyPanel",
  components: { TablePanel },
  props: {
    modeler: {
      type: Object,
      required: true,
    },
  },
  computed: {
    userTask() {
      if (!this.element) {
        return;
      }
      return this.element.type === "bpmn:UserTask";
    },
  },
  data() {
    return {
      form: {
        id: "",
        name: "",
        color: null,
      },
      element: {},
      open: false,
      selectData: [],
      queryParams: {
        userName: "",
      },
      columns: [
        {
          type: "checkout",
          width: "50px",
        },
        {
          field: "userName",
          label: "名称",
        },
        {
          field: "nickName",
          label: "昵称",
        },
      ],
    };
  },
  mounted() {
    this.handleModeler();
  },
  methods: {
    handleModeler() {
      // 监听节点选择变化
      this.modeler.on("selection.changed", (e) => {
        const element = e.newSelection[0];
        this.element = element;
        if (!element) return;
        this.form = {
          ...element.businessObject,
          ...element.businessObject.$attrs,
        };
        if (this.form.userType === "candidateUsers") {
          this.form["candidateUsers"] =
            this.form["candidateUsers"].split(",") || [];
        }
      });

      //  监听节点属性变化
      this.modeler.on("element.changed", (e) => {
        const { element } = e;
        if (!element) return;
        //  新增节点需要更新回属性面板
        if (element.id === this.form.id) {
          this.form.name = element.businessObject.name;
          this.form = { ...this.form };
        }
      });
    },
    // 属性面板名称，更新回流程节点
    nameChange(name) {
      const modeling = this.modeler.get("modeling");
      modeling.updateLabel(this.element, name);
    },
    // 任务节点配置人员
    addUser(properties) {
      this.updateProperties(
        Object.assign(properties, {
          userType: Object.keys(properties)[0],
        })
      );
    },
    // 切换人员类型
    typeChange() {
      const types = ["assignee", "candidateUsers", "candidateGroups"];
      types.forEach((type) => {
        delete this.element.businessObject.$attrs[type];
        delete this.form[type];
      });
    },
    // 在这里我们封装一个通用的更新节点属性的方法
    updateProperties(properties) {
      const modeling = this.modeler.get("modeling");
      modeling.updateProperties(this.element, properties);
    },
    // 打开节点名称弹窗
    handleOpenDialog() {
      this.open = true;
      this.queryParams.userName = this.form.candidateUsers;
    },
    // 放大镜表格多选返回函数
    handleSelectTable(row) {
      this.selectData = row.map((item) => {
        return item.userName;
      });
      this.queryParams.userName = this.selectData.join(",");
    },
    // 节点人员选择
    handleSelectUser() {
      const params = {
        candidateUsers: this.selectData.join(","),
      };
      this.updateProperties(
        Object.assign(params, {
          userType: Object.keys(params)[0],
        })
      );
      this.open = false;
    },
  },
};
</script>

<style scoped>
.property-panel {
  position: absolute;
  right: 0px;
  top: 0px;
  border-left: 1px solid #cccccc;
  padding: 20px;
  width: 300px;
  height: calc(100% - 40px);
}
</style>
